export default {
    data() {
        return {
            open: false,
            keywords: '',
            categories: [
                {
                    name: 'Lifestyle',
                    id: '8',
                    icon: './imgs/life.svg'
                },
                {
                    name: 'Fashion',
                    id: '2',
                    icon: './imgs/fashion.svg'
                },
                {
                    name: 'Travel',
                    id: '6',
                    icon: './imgs/travel.svg'
                },
                {
                    name: 'Humor',
                    id: '26',
                    icon: './imgs/humor.svg'
                },
                {
                    name: 'Home Improvement',
                    id: '27',
                    icon: './imgs/improvement.svg'
                }
            ],
        }
    },
    methods: {
        handleToSearch() {
            window.location.href = `./search.html?keywords=${this.keywords}`
        },
        handleToType(id, name) {
            return `./type.html?type=${id}&name=${encodeURIComponent(name)}`
        }
    },
    template: `        <header>
            <div class="header-container">
                <div class="container">
                    <div class="header-wrapper">
                        <div class="header-menu" @click="open = !open">
                            <svg t="1741933388362" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2356" width="32" height="32">
                                <path
                                    d="M128 256 896 256 896 341.333333 128 341.333333 128 256M128 469.333333 896 469.333333 896 554.666667 128 554.666667 128 469.333333M128 682.666667 896 682.666667 896 768 128 768 128 682.666667Z"
                                    p-id="2357" fill="#f45b69"></path>
                            </svg>
                        </div>
                        <a class="header-logo" href="./">
                            <img src="./imgs/logo.png" alt="logo" width="101" height="49">
                        </a>
                        <div class="header-nav">
                            <a class="header-nav-item" v-for="cate in categories"
                                :href="handleToType(cate.id, cate.name)">
                                <img class="header-nav-item_icon" :src="cate.icon" :alt="cate.name" width="18px">
                                <span class="header-nav-item_name">{{cate.name}}</span>
                            </a>
                        </div>
                        <div class="header-search">
                            <div class="header-search-bar">
                                <input class="header-search-bar_input" type="text" v-model="keywords"
                                    @keyup.enter="handleToSearch">
                                <button class="header-search-bar_btn" @click="handleToSearch">
                                    <img src="./imgs/search.svg" alt="search" width="16">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-side" :class="{open: open}">
                <div class="header-side-cate">
                    <div class="header-side-home">
                        <a class="header-side-logo" href="./">
                            <img src="./imgs/logo.png" alt="logo">
                        </a>
                        <div class="header-side-close" @click="open = false">
                            <img src="./imgs/close.svg" alt="close">
                        </div>
                    </div>
                    <a class="header-side-cate-item" v-for="cate in categories"
                        :href="handleToType(cate.id, cate.name)">
                        <img class="header-side-cate_icon" :src="cate.icon" :alt="cate.name" width="18px">
                        <span class="header-side-cate_name">{{cate.name}}</span>
                    </a>
                </div>
            </div>
        </header>`
}